<template>
  <div class="home-container">
    <div class="welcome-section">
      <h1>欢迎使用惊喜一餐！</h1>
      <p>这里是首页，你可以在这里找到各种美味的餐厅。</p>
      <el-button type="primary" @click="navigateTo('RestaurantList')">查看餐厅列表</el-button>
      <el-button type="success" @click="navigateTo('UserInfo')">查看用户信息</el-button>
    </div>
    <h2 class="recommend-title">推荐餐厅</h2>
    <el-row :gutter="20">
      <el-col :span="8" v-for="restaurant in recommendedRestaurants" :key="restaurant.id">
        <el-card shadow="hover" style="margin-bottom: 20px;">
          <img :src="getImageUrl(restaurant.image)" alt="Restaurant Image" style="width: 100%; height: 200px; object-fit: cover;" />
          <div style="padding: 14px;">
            <span>{{ restaurant.name }}</span>
            <div class="bottom clearfix">
              <time class="time">{{ restaurant.address }}</time>
              <el-rate v-model="restaurant.rating" disabled show-score text-color="#ff9900"></el-rate>
              <el-button type="text" class="button" @click="viewDetails(restaurant.id)">查看详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      restaurants: []
    };
  },
  computed: {
    recommendedRestaurants() {
      // 假设随机选择两家高评分餐厅作为推荐
      const highRatedRestaurants = this.restaurants.filter(r => r.rating >= 4.0);
      if (highRatedRestaurants.length > 2) {
        const shuffled = highRatedRestaurants.sort(() => 0.5 - Math.random());
        return shuffled.slice(0, 2);
      }
      return highRatedRestaurants;
    }
  },
  created() {
    this.fetchRestaurants();
  },
  methods: {
    fetchRestaurants() {
      // 假设从后端获取数据
      this.restaurants = [
        { id: 1, name: '高档酒店餐厅', address: '芜湖市弋江区', rating: 4.5, comments: '很好吃', image: 'restaurant1.png' },
        { id: 2, name: '中档酒店餐厅', address: '芜湖市鸠江区', rating: 4.0, comments: '还可以', image: 'restaurant2.png' },
        { id: 3, name: '廊棚餐厅', address: '芜湖古镇', rating: 3.5, comments: '一般般', image: 'restaurant3.png' },
        { id: 4, name: '食堂', address: '安徽师范大学', rating: 4.8, comments: '太棒了', image: 'restaurant4.png' }
      ];
    },
    navigateTo(routeName) {
      this.$router.push({ name: routeName });
    },
    viewDetails(id) {
      this.$router.push({ name: 'RestaurantDetail', params: { id } });
    },
    getImageUrl(imagePath) {
      return new URL(`../assets/${imagePath}`, import.meta.url).href;
    }
  }
};
</script>

<style scoped>
.home-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welcome-section {
  text-align: center;
  margin-bottom: 40px;
}

.welcome-section h1 {
  font-size: 36px;
  color: #333;
  margin-bottom: 20px;
}

.welcome-section p {
  font-size: 18px;
  color: #666;
  margin-bottom: 20px;
}

.el-button {
  font-size: 16px;
  margin-right: 10px;
}

.recommend-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.el-row {
  justify-content: center;
}

.el-card {
  width: 100%;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>